<template>
	<view class="user">
		<!--头部-->
		<view class="user-section " :class="'bg-' + themeColor.name">
			<!--用户信息-->
			<view class="vip-card-box">
				<view class="tit">
					<text class="e-m" style=" font-size: 38upx;float: left;margin-bottom: 20upx;">谭梦雄</text>
					<text class="icon iconfont" style="margin-left: 10upx;margin-bottom: 10upx;" >&#xe646;</text><view style="width: 40%; float: right;width: 100upx;height: 100upx;border-radius: 30px;background-color: #EEEEEE;">
						<image src="../../static/user-head.png" style="width: 95upx; height: 95upx; border-radius: 30px;margin: 4upx;"></image>
					</view>
					<text class="e-m" style="width: 80%; font-size: 26upx;float: left;">合作项目经理</text>
					
				</view>
			</view>
		</view>
		<!-- 个人中心 内容区-->
		<view class="cover-container container" :style="[
			{
				transform: coverTransform,
				transition: coverTransition
			}
		]"
		 @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<image class="arc" :src="arc"></image>
			<!-- 个人资料 -->
			<view class="set">
				<view class="list-cell b-b" 
				 hover-class="cell-hover" :hover-stay-time="50">
				 <text style="width: 50upx; height: 55upx; background-color: rgb(58, 220, 150);border-radius: 8upx;">
					 <text class="icon iconfont" style="margin-left: 10upx;margin-bottom: 10upx;" >&#xe631;</text>
					 </text>
					<text class="cell-tit">组织信息</text>
					<text style="float: right;margin-right: 20upx;margin-top: 20upx;" class="icon iconfont">&#xe67c;</text>
				</view>
				<view class="list-cell b-b"
				 hover-class="cell-hover" :hover-stay-time="50">
				    <text style="width: 50upx; height: 55upx; background-color: rgb(37,127,253);border-radius: 8upx;">
				 	<text class="icon iconfont" style="margin-left: 6upx;font-size: 40upx;" >&#xe628;</text>
				 	</text>
					<text class="cell-tit">单位信息</text>
					<text style="float: right;margin-right: 20upx;margin-top: 20upx;" class="icon iconfont">&#xe67c;</text>
				</view>
				<view class="list-cell b-b list-cell.m-t"
				 hover-class="cell-hover" :hover-stay-time="50">
				 <view class="fa fa-address-book"></view>
				    <text style="width: 50upx; height: 55upx; background-color: rgb(254,153,1);border-radius: 8upx;">
				    <text class="icon iconfont" style="margin-left:6upx;font-size: 40upx;" >&#xe60f;</text>
				    </text>
					<text class="cell-tit">我的文件</text>
					<text style="float: right;margin-right: 20upx;margin-top: 20upx;" class="icon iconfont">&#xe67c;</text>
				</view>
				<view class="list-cell b-b"
				 hover-class="cell-hover" :hover-stay-time="50">
				     <text style="width: 50upx; height: 55upx; background-color: rgb(254,153,1);border-radius: 8upx;">
				     <text class="icon iconfont" style="margin-left:6upx;font-size: 40upx;" >&#xe659;</text>
				     </text>
					<text class="cell-tit">我的收藏</text>
					<text style="float: right;margin-right: 20upx;margin-top: 20upx;" class="icon iconfont">&#xe67c;</text>
				</view>
				<view class="list-cell b-b list-cell.m-t"
				 hover-class="cell-hover" :hover-stay-time="50">
				     <text style="width: 50upx; height: 55upx; background-color: rgb(58, 220, 150);border-radius: 8upx;">
				     <text class="icon iconfont" style="margin-left:6upx;font-size: 40upx;" >&#xe663;</text>
				     </text>
					<text class="cell-tit">账号与安全</text>
					<text style="float: right;margin-right: 20upx;margin-top: 20upx;" class="icon iconfont">&#xe67c;</text>
				</view>
				<view class="list-cell b-b"
				 hover-class="cell-hover" :hover-stay-time="50">
				    <text style="width: 50upx; height: 55upx; background-color: rgb(37,127,253);border-radius: 8upx;">
				    <text class="icon iconfont" style="margin-left:6upx;font-size: 40upx;" >&#xe696;</text>
				    </text>
					<text class="cell-tit">设置</text>
					<text style="float: right;margin-right: 20upx;margin-top: 20upx;" class="icon iconfont">&#xe67c;</text>
				</view>

			</view>
			
			<view v-if="hasLogin" class="list-cell log-out-btn" :class="'text-' + themeColor.name" @tap="toLogout">
				<text class="cell-tit">退出登录</text>
			</view>

		</view>
	</view>
</template>
<script>
	import {
		mapMutations
	} from 'vuex';
	import listCell from '@/components/oa-list-cell';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell
		},
		data() {
			return {
				colorModal: false,
				mycenterList: this.$mConstDataConfig.mycenterList,
				themeList: this.$mConstDataConfig.themeList,
				setList: this.$mConstDataConfig.setList,
				headImg: this.$mAssetsPath.headImg,
				userBg: this.$mAssetsPath.userBg,
				vipCardBg: this.$mAssetsPath.vipCardBg,
				arc: this.$mAssetsPath.arc,
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
			};
		},
		async onShow() {
			// 初始化数据
			await this.initData();
		},
		onLoad() {
			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform === 'ios') {
				this.CustomBar = 0;
			}
			// #endif
		},
		// #ifndef MP
		onNavigationBarButtonTap(e) {
			const index = e.index;
			if (index === 0) {
				this.navTo('/pages/set/set');
			} else if (index === 1) {}
		},
		// #endif
		methods: {
			handleTip(isNewVersion) {
				this.isNewVersion = isNewVersion;
			},
			handleVersionUpgradeShow() {
				this.isVersionUpgradeShow = false;
			},
			// 数据初始化
			async initData() {
				// this.user = uni.getStorageSync('user');
				// 缓存大小
				this.setList[2].content = `${uni.getStorageInfoSync().currentSize} kb`;
				// #ifdef APP-PLUS
				this.setList[5].content = `当前版本 V1.0.0`;
				// #endif
				this.hasLogin = false;
				uni.setTabBarStyle({
					selectedColor: this.themeColor.color,
					borderStyle: 'white'
				});
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				});
				this.themeColor.tabList && this.themeColor.tabList.forEach((selectedIconPath, index) => {
					uni.setTabBarItem({
						index,
						selectedIconPath
					});
				});

			},

			showColorModal() {
				this.colorModal = true;
			},
			SetColor(item) {
				this.colorModal = false;
				this.themeColor = item;
				this.$mStore.commit('setThemeColor', item);
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: this.themeColor.color,
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				});
				uni.setTabBarStyle({
					selectedColor: this.themeColor.color,
					borderStyle: 'white'
				});
				this.themeColor.tabList && this.themeColor.tabList.forEach((selectedIconPath, index) => {
					uni.setTabBarItem({
						index,
						selectedIconPath
					});
				});
			},

			// 统一跳转接口,拦截未登录路由
			/* navTo(route) {
				if (!route) return;
				if (route === 'clearCache') {
					uni.showModal({
						content: '确定要清除缓存吗',
						success: e => {
							if (e.confirm) {
								uni.clearStorageSync();
								this.setList[2].content = '0 kb';
								this.$mStore.commit('login', this.user);
								this.$mHelper.toast('清除缓存成功');
							}
						}
					});
					return;
				} else if (route === 'versionUpgrade') {
					this.isVersionUpgradeShow = true;
					if (this.isNewVersion) {
						this.$mHelper.toast('已经是最新版本');
					}
					return;
				} else {
					this.$mRouter.push({
						route
					});
				}
			}, */
				
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}
				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			},


		}
	};
</script>
<style lang="scss" scoped>
	
	page {
		background-color: $page-color-base;
	}

	.user {


		.set {
			padding: $spacing-base 0;

		}

		.user-section {
			padding: 40upx 20upx 20upx 20upx;
			height: 350upx;
			padding: 100upx 30upx 0;
			position: relative;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100vw;
				height: 60vw;
				opacity: 0.84;
			}

			.container{
				width: 670upx; /* 750 - 20*2 - 20*2 */
				margin-bottom: 20upx;
				background-color: #FFFFFF;
				border-radius: 4px;
				padding: 40upx 20upx 20upx 20upx;
				/* padding-bottom: 20upx; */
				/* padding-left: 15upx; */
				/* padding-right: 15upx; */
			}

			.vip-card-box {
				display: flex;
				flex-direction: column;
				color: #f7d680;
				height: 240upx;
				background: url('/static/vip-card.png');
				background-size: 100% 100%;
				border-radius: 16upx 16upx 0 0;
				overflow: hidden;
				position: relative;
				padding: 20upx 24upx;

				.b-btn {
					position: absolute;
					right: 24upx;
					top: 24upx;
					width: 160upx;
					height: 40upx;
					text-align: center;
					line-height: 40upx;
					font-size: 22upx;
					color: #36343c;
					border-radius: 20px;
					background: linear-gradient(to left, #f9e6af, #ffd465);
					z-index: 1;
				}

				.tit {
					font-size: $font-base + 2upx;
					color: #f7d680;
					margin-bottom: 28upx;
					margin-top: 40upx;
					font-size: 32upx;

					.iconfont {
						color: #f6e5a3;
						display: inline-block;
						margin-right: 16upx;
					}
				}
			}
		}

		.cover-container {
			margin-top: 40upx;
			padding: 0 30upx 20upx;
			position: relative;
			background-color: $page-color-base;

			.arc {
				position: absolute;
				left: 0;
				top: -34upx;
				width: 100%;
				height: 36upx;
			}

			.promotion-center {
				background: #fff;
				margin-bottom: 20upx;

				/*分类列表*/
				.category-list {
					width: 100%;
					padding: 0 0 30upx 0;
					border-bottom: solid 2upx #f6f6f6;
					display: flex;
					flex-wrap: wrap;

					.category {
						width: 33.3%;
						margin-top: 50upx;
						display: flex;
						justify-content: center;
						flex-wrap: wrap;

						.img {
							width: 100%;
							display: flex;
							justify-content: center;

							.iconfont {
								font-size: $font-lg + 24upx;
							}
						}

						.text {
							width: 100%;
							display: flex;
							justify-content: center;
							font-size: 24upx;
							color: #3c3c3c;
						}

						.share-btn {
							height: 142upx;
							text-align: left;
							background: none;
							padding: 0;
							margin: 0;
						}

						.share-btn:after {
							border: none;
							border-radius: none;
						}
					}
				}
			}

			.tj-sction {
				@extend %section;
				display: flex;

				.tj-item {
					@extend %flex-center;
					flex: 1;
					flex-direction: column;
					margin: 30upx 0;
					font-size: $font-sm;
					color: #75787d;
					/*border-right: 2upx solid rgba(0, 0, 0, 0.2);*/
				}

				/*.tj-item:last-child {*/
				/*border-right: none;*/
				/*}*/
				.num {
					font-size: $font-base;
				}

				.red {
					color: $base-color;
				}
			}

		}
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		justify-content: space-around;
		display: flex;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
</style>
